<style>

    #suggestions{
        background-color: black;
        color: white;
    }

    #autoSuggestionsList{
        background-color: black;
        color: white;
    }
    .suggestionList li {

        margin: 0px 0px 0px 0px;
        padding: 3px;
        cursor: pointer;
    }

    .suggestionList li:hover {
        background-color: #659CD8;

    }
    </style>

<script language="JavaScript">



    function lookup(inputString) {
        cus=-1;
        if(inputString.length == 0) {
            // Hide the suggestion box.
            $('#suggestions').hide();
        } else {
            $.post("/admin/command/getplace", {queryString: ""+inputString+""}, function(data){
                if(data.length >0) {
                    $('#suggestions').show();
                    $('#autoSuggestionsList').html(data);
                }
            });
        }
    } // lookup
    function aa (){

        if(document.activeElement.id!="inputString"){

            if(document.activeElement.id!="inputString1"){
                setTimeout("$('#suggestions').hide();", 200);
            }
        }
    }

    function fill(obj) {

        console.log($(obj).html()+"##########");
        $('#inputString').val($(obj).html());
        $("#pinfo").html($(obj).attr("pcontent"))
        $("#info_linkid").val($(obj).attr("placeid"))
        $("#info_title").val($(obj).attr("pname"))
        //setTimeout("aa()",200);

    }
    function fill1(thisValue) {
        setTimeout("aa()",200);
    }

    //全局定义 当前选择的li数组下标

    var cus=-1;
    function sitem(event,obj){

//获取所有选项li
        var liarr=$("#autoSuggestionsList").find("li")
        //向上
        if (event.keyCode == 38) {
            $("#inputString1").focus();
            if(-1>cus){
                cus=liarr.length-2;
            }
            cus--;
            $("#autoSuggestionsList").find("li").css("background-color","#252525");
            $(liarr[cus]).css("background-color","#659CD8");
            $("#inputString").val($(liarr[cus]).html())
            $("#inputString1").val($(liarr[cus]).html())
        }

        //向下
        if(event.keyCode == 40){
            $("#inputString1").focus();
            if(cus>liarr.length-2){
                cus=-1;
            }
            cus++;
            $("#autoSuggestionsList").find("li").css("background-color","#252525");
            $(liarr[cus]).css("background-color","#659CD8");
            $("#inputString").val($(liarr[cus]).html())
            $("#inputString1").val($(liarr[cus]).html())
        }
        //回车
        if(event.keyCode == 13){
            console.log($(liarr[cus]).attr("placeid")+"@@@@@@@@");

            $("#inputString").val($(liarr[cus]).html())
            $("#inputString1").val($(liarr[cus]).html())
            $("#pinfo").html($(liarr[cus]).attr("pcontent"))
            $("#info_linkid").val($(liarr[cus]).attr("placeid"))
            $("#info_title").val($(liarr[cus]).attr("pname"))

            $("#inputString").focus();
            cus=-1;
        }
    }

</script>

<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('P_name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-p_name" class="form-control" name="row[p_name]" type="text">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('S_name')}:</label>
        <div class="col-xs-12 col-sm-8">

            <input type="text" size="30" value="" id="inputString" onfocus="lookup(this.value);" onkeyup="lookup(this.value);" onblur="fill1();"  onkeydown="sitem(event,this)" autocomplete="off"/>

            <div style="width: 0px; height: 0px; overflow: hidden"><input  type="text" size="30" value="" id="inputString1" onkeydown="sitem(event,this)" onblur="fill1();" autocomplete="off"/></div>

            <input id="c-s_name" class="form-control" name="row[s_name]" type="text">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('E_name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-e_name" class="form-control" name="row[e_name]" type="text">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('P_no')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-p_no" class="form-control" name="row[p_no]" type="text">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Status')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-status" class="form-control" name="row[status]" type="number">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('P_type')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-p_type" class="form-control" name="row[p_type]" type="number">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Userid')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-userid" class="form-control" name="row[userid]" type="number">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Username')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-username" class="form-control" name="row[username]" type="text">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('C_time')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-c_time" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" name="row[c_time]" type="text" value="{:date('Y-m-d H:i:s')}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Seotext')}:</label>
        <div class="col-xs-12 col-sm-8">
            <textarea id="c-seotext" class="form-control " rows="5" name="row[seotext]" cols="50"></textarea>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Startcity')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-startcity" class="form-control" name="row[startcity]" type="text">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Endcity')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class='control-relative'><input id="c-endcity" class="form-control" data-toggle="city-picker" name="row[endcity]" type="text"></div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Transport')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-transport" class="form-control" name="row[transport]" type="text">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Linkid')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-linkid" class="form-control" name="row[linkid]" type="text">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('P_day')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-p_day" class="form-control" name="row[p_day]" type="number">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Children')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-children" class="form-control" name="row[children]" type="number">
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>
